<template>
  <el-card class="box-card" v-show="tabCardShow">
    <div slot="header" class="clearfix" >
      <span v-drag style="float:left">{{title}}简介</span>
      <el-button style="float: right; padding: 3px 0" type="text" @click="close">关闭</el-button>
    </div>
    <div class="content">
      <div v-html="content" style="font-size: 10px;text-align: left; text-indent : 20px"></div>
    </div>
  </el-card>
</template>

<script>
export default {
  name: "popView",
  directives: {
    drag(el, bindings, vnode) {
      el.onmousedown = function (e, bindings, vnode) {
        let ndoe = e.currentTarget.parentNode
        let disx = e.pageX - ndoe.offsetLeft
        let disy = e.pageY - ndoe.offsetTop
        document.onmousemove = function (e) {
          ndoe.style.left = e.pageX - disx + 'px'
          ndoe.style.right = ''
          ndoe.style.top = e.pageY - disy + 'px'
        }
        document.onmouseup = function () {
          document.onmousemove = document.onmouseup = null
        }
      }
    }
  },
  data(){
    return{
      content:'卫星地图显示，北京五环内最大一抹绿在西北角，香山、玉泉山、圆明园、颐和园掩映其中，向西融入西山绵延的绿色中。“山水连城，翠海芳淀”，一幅蓝绿交织的大美画卷。\n' +
          '\n' +
          '　　2022年是海淀区提出打造“三山五园历史文化景区”的第十个年头。十年来，“三山五园”整体保护利用从区级战略到市级重点、国家级文物保护利用示范区，实现了三级跳。\n' +
          '\n' +
          '　　随着北京海淀三山五园国家文保利用示范区建设的推进，有着“园林紫禁城”之称的三山五园地区历史风貌逐步得到恢复，山水林田交织的自然风光为城市提供了优良的生态环境，文化价值的挖掘增强着国人的文化自信，文化与科技融合发展推动着中关村科学城高质量发展。\n' +
          '\n' +
          '　　予历史以未来，三山五园在新时代焕发生机。\n' +
          '\n' +
          '北坞公园与远处玉峰塔交相辉映（孙玉芬 摄）',
      tabCardShow:false,
      title:'恩佑寺建成'
    }
  },
  methods:{
    close(){
      this.tabCardShow = false;
    }
  }
}
</script>

<style scoped>
.box-card{
  width:350px;
  max-height: 700px;
  overflow-y: scroll;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
.card__body{
  font-size: 15px;
}
::v-deep img{
  height: 200px;
  width: 315px;
  float: left;
  background-size: 100% 100%;
}

::-webkit-scrollbar {
  width: 6px; /*对垂直流动条有效*/
  height: 6px; /*对水平流动条有效*/
}
</style>
